<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>

<div class="box">
<el-form ref="form" :model="form" label-width="80px"  :inline="true">
	<el-form-item label="订单编号">
	    <el-input v-model="form.sn" :disabled="true"></el-input>
	</el-form-item>
	<el-form-item label="操作人">
	       <el-select v-model="form.a_id" filterable  placeholder="请选择操作人">
			      <el-option v-for="item of admins" :label="item.nick" :value="item.id"></el-option>
		    </el-select>
	</el-form-item>
	<el-form-item label="调出仓库">
		  <el-cascader
		    v-model="form.a_shop_warehouse"
		    :options="warehouses2"
		    :props="{ expandTrigger: 'hover' }"></el-cascader>
	</el-form-item>
	<el-form-item label="调入仓库">
		  <el-cascader
		    v-model="form.b_shop_warehouse"
		    :options="warehouses"
		    :props="{ expandTrigger: 'hover' }"></el-cascader>
	</el-form-item>
	<div>
 <el-button type="success" @click="addPro">增加产品</el-button>
<el-table
    :data="tableData"
    border

    style="width: 100%">
    <el-table-column
      label="产品名称"
      width="180">
      <template slot-scope="scope">
      		<el-select v-model="scope.row.product_id" filterable  @change="proSelect(scope.$index)" placeholder="请选择产品">
			      <el-option v-for="item,idx in products" :label="item.name" :value="item.product_id" :key="idx"></el-option>
		    </el-select>
	  </template>
    </el-table-column>
        <el-table-column
      label="供应商">
      	<template slot-scope="scope">
	   {{scope.row.supplier_text}}
	   </template>
    </el-table-column>
    <el-table-column
      label="规格">
      	<template slot-scope="scope">
	   {{scope.row.specs}}
	   </template>
    </el-table-column>
    <el-table-column
      label="数量">
      <template slot-scope="scope">
	   <el-input v-model="scope.row.num"></el-input>
	  </template>
    </el-table-column>
    <el-table-column
      label="单位">
        <template slot-scope="scope">
        {{scope.row.unit_text}}
	  </template>
    </el-table-column>

    <el-table-column
      label="采购单价" v-if="false">
      <template slot-scope="scope">

	   <el-input v-model="scope.row.price1"></el-input>
	  </template>
    </el-table-column>
    <el-table-column
      label="采购金额" v-if="false">
      <template slot-scope="scope">
      {{ scope.row.num * scope.row.price1}}
	  </template>
    </el-table-column>
    <el-table-column
      label="备注">
      <template slot-scope="scope">
	   <el-input v-model="scope.row.bak"></el-input>
	  </template>
    </el-table-column>
    <el-table-column
      label="操作">
      <template slot-scope="scope">
	   <el-button @click.prevent="removeItem(scope.$index)">删除</el-button>
	  </template>
    </el-table-column>

  </el-table>
  </div>
  	<el-form-item label="备注">
	    <el-input v-model="form.bak" ></el-input>
	</el-form-item>
    <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
  </el-form-item>
 </el-form>
</div>


<script type="text/javascript">
    var vm = new Vue({
    	el:".box",
    	data:{
    		form:{
    			sn:'{$sn}',
    			a_id:'',
    			a_shop_warehouse:'',
    			b_shop_warehouse:'',
    			bak:''
    		},
    		admins:{:json_encode($admins)},
        warehouses:{:json_encode($warehouses)},
    		warehouses2:{:json_encode($warehouses2)},
    		products:{:json_encode($products)},
    		tableData:[],
    		defaultProduct:[],
    	},
    	created(){
    		this.defaultProduct = this.products[0]
    	},
    	methods:{
    		onSubmit:function(){
    			// console.log(this.form)
    			// console.log(this.tableData)
    			var that = this;
    			var param = this.form;
    			param.product = this.tableData;
    			console.log(param);

    			axios.post('{:url('addDo')}', param).then(function (response) {
	                if(response.data.status === true){
	                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
	                    that.$message({
	                        type: 'success',
	                        message: response.data.message,
	                        onClose: function(){
	                            parent.layer.close(index); //再执行关闭
	                            // layer.close(layer.index);
	                            window.parent.location.reload();
	                        }
	                    })
	                }else{
	                    that.$message({
	                        type: 'error',
	                        message: response.data.message
	                    })
	                }
	            }).catch(function (error) {
	                console.log(error);
	            });



    		},
    		removeItem:function(idx){
    			this.tableData.splice(idx,1);
    		},
    		addPro:function(){
    			this.tableData.push({
    				product_id:this.defaultProduct.product_id,
    				name:this.defaultProduct.name,
    				specs: this.defaultProduct.specs,
    				unit_text: this.defaultProduct.unit_text,
    				supplier_id: this.defaultProduct.supplier_id,
    				supplier_text: this.defaultProduct.supplier_text,
    				unit_id: this.defaultProduct.unit_id,
    				price1: this.defaultProduct.price1,
    				price2: this.defaultProduct.price1,
    				num:1
    			});
    		},
    		proSelect:function(idx){
    			var that = this;

			    let row = that.products.filter(function(p){
				     return p.product_id === that.tableData[idx].product_id;
				 })[0]
		       Object.keys(row).map(key => {

		          if (key !== 'product_id') {
		            that.$set(that.tableData[idx], key, row[key])
		          }
		        })

    		},
			getSummaries(param) {
				const { columns, data } = param;
				const sums = [];
				// console.log(data);
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '总价';
						return;
					}
			        if (index === 6) {
			            let count = 0
			            this.tableData.map(i => {
			              count += Number(i.num * i.price1)
			            })
			            sums[index] = count
			            return
			         }
				});

				return sums;
			}

    	}
    })
</script>
{include file="system@block/layui" /}
